<template>
  <div id="body">
    <header><div id="main" ref="roseRef"></div></header>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import '../../../public/static/theme/macarons'
export default {
  data() {
    return {
      chartInstance: null,
      totalData: {}
    }
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.roseRef, 'macarons')
      const option = {
        title: {
          text: '总计确诊top5'
        },
        legend: {
          left: 60,
          top: 25,
          textStyle: {
            //图例字体大小
            fontSize: 10
          },
          //图例大小
          itemHeight: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '总共确诊',
            type: 'pie',
            radius: ['30%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
      this.chartInstance.setOption(option)
    },
    async getChartData() {
      const { data: res } = await this.$jsonp(
        'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      )

      this.totalData = JSON.parse(res)
      let list = this.totalData.areaTree[0].children.map((item) => ({
        name: item.name,
        value: item.total.confirm
      }))
      list.sort((a, b) => b.value - a.value)
      const endList = []
      for (let i = 0; i < 5; i++) {
        endList.push(list[i])
      }
      const roseOption = {
        series: [
          {
            data: endList
          }
        ]
      }
      this.chartInstance.setOption(roseOption)
      window.addEventListener('resize', () => {
        // 执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.chartInstance.resize()
      })
    }
  },
  mounted() {
    this.initChart()
    this.getChartData()
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
#body {
  height: 100%;
  margin-left: 10px;
  &::before {
    position: absolute;
    top: 0;
    content: '';
    left: -10px;
    height: 10px;
    width: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    content: '';
    right: 10px;
    height: 10px;
    width: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  header {
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    #main {
      padding-right: 20px;
      padding-top: 10px;
      height: 100%;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 30px;
        content: '';
        left: -10px;
        height: 10px;
        width: 10px;
        border-bottom: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      &::after {
        position: absolute;
        bottom: 30px;
        content: '';
        right: 10px;
        height: 10px;
        width: 10px;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }
    }
  }
}
</style>
